<template>
    <div class="login">
        <div class="box">
            <h2>智慧医疗标记系统</h2>
            <div class="loginForm">
                <el-form class="demo-ruleForm" status-icon :model="userForm" label-width="100px" :rules="rules"
                    ref="userForm">
                    <el-form-item prop="userName">
                        <i class="el-icon-userName"></i>
                        <el-input placeholder="请输入账号（手机号）" v-model="userForm.userName" auto-complete="off">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="rawPassword">
                        <div @click="showpass = !showpass" style="float: left; cursor: pointer">
                            <i class="el-icon-lock" v-show="!showpass"></i>
                            <i class="el-icon-unlock" v-show="showpass"></i>
                        </div>
                        <div style="float: left">
                            <el-input type="password" placeholder="请输入密码" v-model="userForm.rawPassword"
                                v-show="!showpass" auto-complete="off" @keyup.enter="submitForm('userForm')">
                            </el-input>
                            <el-input type="text" placeholder="请输入密码" v-model="userForm.rawPassword" v-show="showpass"
                                auto-complete="off" @keyup.enter="submitForm('userForm')">
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 150px;" type="primary" @click="login">
                            登录
                        </el-button>
                    </el-form-item>

                </el-form>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Login',
    data() {
        return {
            showpass: false,
            title: '医疗采集系统',
            userForm: {
                userName: "",
                rawPassword: ""
            },
            rules: {
                userName: [
                    { required: true, message: '请输入账号（手机号）', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' },
                ],
                rawPassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
        }
    },

    methods: {
        login() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: "加载中",
                        spinner: "el-icon-loading",
                        background: "rgba(0, 0, 0, 0.7)",
                    });

                    this.$axios({
                        headers: { "Content-Type": "application/json" },
                        method: "post",
                        url: this.URLhost + "/medical/user/login",
                        data: JSON.stringify({
                            userName: this.userForm.userName,
                            userPassword: this.userForm.rawPassword,
                        }),
                    })
                        .then((res) => {
                            console.log("登录响应", res.data);
                            console.log("id", res.data.data.user_id);

                            if (res.data.code === 0) {
                                const token = res.data.data.token; 
                                const sysName = res.data.data.sysName; 
                                if (token === 1) { 
                                localStorage.setItem('info', 'eye'); 
                                localStorage.setItem('sysName', '眼诊系统'); 
                                // this.$router.push({ name: "eyeAll" }); 
                                }else if (token === 2) {
                                localStorage.setItem('info', 'palm');  
                                localStorage.setItem('sysName', '手诊系统'); 
                                // this.$router.push({ name: "palmAll" }); 
                                }else if (token === 3) {
                                localStorage.setItem('info', 'tongue');
                                localStorage.setItem('sysName', '舌诊系统');  
                                // this.$router.push({ name: "tongueAll" });  
                                }
                                this.$router.push({ name: "Frame" });
                                this.$message({ message: "登录成功", type: "success" });
                            } else if (res.data === 1) {
                                this.$message.error('用户名或密码错误');
                            } else {
                                this.$message.error('登录过程中遇到问题，请稍后再试');
                            }

                            loading.close();
                        })
                        .catch((error) => {
                            console.error("登录失败", error);
                            this.$message.error('登录过程中遇到问题，请稍后再试');
                            loading.close();
                        });

                    setTimeout(() => {
                        loading.close();
                    }, 5000);
                } else {
                    console.log('表单验证失败!');
                    return false;
                }
            });
        },
    }
}
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    /*背景图片*/
    background-image: url("../assets/image/login.jpg");
    position: fixed;
    background-size: cover;
}

.box {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500px;
    height: 300px;
    margin: auto;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.34);
}

.box h2 {
    padding: 20px 0 20px 0;
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    line-height: 30px;
    color: #3333aa;
}



.el-form .el-form-item i {
    width: 50px;
    color: #3333aa;
}

.el-form .el-form-item .el-input {
    width: 250px;
}

.el-form .el-form-item .el-button {
    background-color: #3333aa;
    color: #fff;
    padding: 10px 30px;
    border: 1px solid #fff;
    cursor: pointer;
    font-size: 18px;
    /* text-align: center;   */
}
</style>
